<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="tabbar-wrap" v-loading="loading">
        <div class="tabbar-item" v-for="(item, index) of list" :key="index">
          <div style="cursor: pointer;" @click="handleEdit(index)">
            <div class="tabbar-img"><img :src="item.icon" alt=""></div>
            <div class="tabbar-img-hover"><img :src="item.choosedIcon" alt=""></div>
            <div class="tabbar-name">{{ item.name }}</div>
          </div>
          <a-icon @click="onRemove(index)" class="tabbar-close" type="close-circle" />
        </div>
        <div v-if="list.length < 5" class="tabbar-item tabbar-plus" @click="onCreate">
          <a-icon type="plus" style="font-size: 30px;" />
        </div>
      </div>
    </a-card>
    <a-modal
      title="编辑底部菜单"
      :width="600"
      destroyOnClose
      v-model="visiable"
      @ok="handleEditOk"
      :confirmLoading="confirmLoading"
    >
      <a-form-model ref="modelForm" :model="formModel" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="图标" prop="icon">
          <storage-select
            placeholder="请选择图标"
            v-model="formModel.icon">
          </storage-select>
        </a-form-model-item>
        <a-form-model-item label="选中图标" prop="choosedIcon">
          <storage-select
            placeholder="请选择选中图标"
            v-model="formModel.choosedIcon">
          </storage-select>
        </a-form-model-item>
        <a-form-model-item label="名称" has-feedback prop="name">
          <a-input v-model="formModel.name" placeholder="请输入名称" />
        </a-form-model-item>
        <a-form-model-item label="页面">
          <span v-if="formModel.linkName">{{ formModel.linkName }}, {{ formModel.link.link }}</span>
          <a-divider type="vertical" v-if="formModel.linkName"/>
          <a-button @click="showLink = true">选择</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <select-link v-model="showLink" @onOk="onOk"></select-link>
  </page-header-wrapper>
</template>

<script>
import { SelectLink } from '@/components'
import { getTabbar, setTabbar } from '@/api/saas/tabbar'

const defaultModel = {
  type: 'foot_nav_item',
  icon: '',
  choosedIcon: '',
  name: '',
  page: '',
  pageName: '',
  link: {},
  linkName: ''
}

export default {
  name: 'SaasTabbar',
  components: {
    SelectLink
  },
  data () {
    return {
      currentIndex: -1,
      confirmLoading: false,
      loading: false,
      showLink: false,
      visiable: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      formModel: defaultModel,
      rules: {
        icon: [{ required: true, message: '请选择图标', trigger: 'blur' }],
        choosedIcon: [{ required: true, message: '请选择选中图标', trigger: 'blur' }],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      },
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getTabbar({}).then(res => {
        if (res.code == 0) {
          this.list = res.data
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.loading = false
      })
    },
    onOk (e) {
      this.formModel.link = JSON.parse(JSON.stringify(e))
      this.formModel.linkName = e.name
    },
    handleEdit: function (index) {
      this.formModel = JSON.parse(JSON.stringify(this.list[index]))
      this.currentIndex = index
      this.visiable = true
    },
    handleEditOk: function () {
      this.$refs['modelForm'].validate(valid => {
        if (valid) {
          if (this.currentIndex === -1) {
            this.list.push(this.formModel)
          } else {
            this.list.splice(this.currentIndex, 1, this.formModel)
          }

          this.confirmLoading = true
          setTabbar({ tabbar: this.list }).then(res => {
            this.$message.success('保存成功')
          }).catch(error => {
            console.log(error)
          }).then(() => {
            this.confirmLoading = false
            this.visiable = false
          })
        }
      })
    },
    onRemove: function (index) {
      this.$confirm({
        content: '确定要删除吗?',
        onOk: () => {
          this.$message.loading({ content: '删除中...', key: 'deleteLoading' })
          const tabbarCopy = JSON.parse(JSON.stringify(this.list))
          tabbarCopy.splice(index, 1)
          setTabbar({ tabbar: tabbarCopy }).then(res => {
            if (res.code == 0) {
              this.list.splice(index, 1)
              this.$message.success({ content: '删除成功', key: 'deleteLoading' })
            } else {
              this.$message.warning({ content: '删除失败', key: 'deleteLoading' })
            }
          })
        }
      })
    },
    onCreate: function () {
      this.formModel = JSON.parse(JSON.stringify(defaultModel))
      this.currentIndex = -1
      this.visiable = true
    }
  }
}
</script>

<style scoped>
.tabbar-item {
  width: 80px;
  padding: 10px;
  text-align: center;
  display: inline-block;
  border: 1px solid #eee;
  margin-right: 10px;
  border-radius: 3px;
  position: relative;
}
.tabbar-item:hover {
  border-color: #2593fc;
}
.tabbar-item img {
  width: 45px;
  height: 45px;
  margin-bottom: 5px;
}
.tabbar-item span {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tabbar-plus {
  position: relative;
  width: 50px;
  padding: 8px 0;
  top: -15px;
  cursor: pointer;
}
.tabbar-plus:hover i {
  color: #2593fc;
}
.tabbar-close {
  position: absolute;
  right: -8px;
  top: -8px;
  color: red;
  font-size: 20px;
  display: none;
}
.tabbar-item:hover .tabbar-close {
  display: block;
}
.tabbar-img-hover {
  display: none;
}
.tabbar-item:hover .tabbar-img {
  display: none;
}
.tabbar-item:hover .tabbar-img-hover {
  display: initial;
}
</style>
